<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  用户名：<input type="text" class="username"><br>
  密码：<input type="text" class="password"><br>
  <input type="button" value="登录" class="login">
  <br>
  <br>
  <table border="1" width="750">
    <thead>
      <tr>
        <th>手机号</th>
        <th>姓名</th>
        <th>用户名</th>
        <th>部门</th>
        <th>权限</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</body>
<script src="./ajax.js"></script>
<script>

  class TestAjax{
    constructor(){
      // 1. 选择元素
      this.un = document.querySelector(".username");
      this.pw = document.querySelector(".password");
      this.login = document.querySelector(".login");
      this.tbody = document.querySelector("tbody");
      // 2. 准备后端接口
      this.loginUrl = "http://10.11.55.249:3000/login";
      this.getUserUrl = "http://10.11.55.249:3000/getuser";
      // 3. 绑定事件
      this.addEvent();
    }
    addEvent(){
      const that = this;
      // 点击登录按钮
      this.login.onclick = function(){
        // 4. 发起登录请求
        that.loginLoad();
      }
    }
    loginLoad(){
      // 开启ajax
      ajax({
        url: this.loginUrl,
        data:{
          username: this.un.value,
          password: this.pw.value
        },
        success:res=>{
          // 5. 请求成功后，解析数据（根据后端返回数据的格式解析）
          res = JSON.parse(res);
          // 6. 根据后端返回的数据内容，判断是否登录成功
          if(res.code === 0){
            // 7. 存储token
            this.token = res.data.token;
            // 8. 获取所有用户信息
            this.getUserLoad()
          }else{
            alert(res.msg);
          }
        }
      })
    }
    getUserLoad(){
      // 发起ajax请求
      ajax({
        url: this.getUserUrl,
        data:{
          token: this.token
        },
        success:res=>{
          // 9. 请求成功后，解析数据
          res = JSON.parse(res);
          this.userMsg = res.data;
          // 10. 根据接收到并解析之后的用户数据，准备渲染页面
          this.render()
        }
      })
    }
    render(){
      // 11. 拼接页面结构的html字符
      let str = "";
      this.userMsg.forEach(val=>{
        str += `<tr>
                  <td>${val.tel}</td>
                  <td>${val.uName}</td>
                  <td>${val.username}</td>
                  <td>${val.tId ? val.tId : "无"}</td>
                  <td>${val.power}</td>
                </tr>`
      })
      // 12. 填充到指定容器
      this.tbody.innerHTML = str;
    }
  }

  new TestAjax;

</script>
</html>